<template>
  <div class="drawer_box" style="transform: translateY(-20px)">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="列表" name="列表"></el-tab-pane>
      <el-tab-pane label="新增" name="新增"></el-tab-pane>
    </el-tabs>
    <div class="" v-if="activeName == '列表'">
      <div class="input_box">
        <el-select
          v-model="selectValue"
          placeholder="监区"
          style="width: 200px; "
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
  
        <el-button
          type="primary"
          :icon="Search"
          @click="searchClick"
        ></el-button>
   
      </div>
      <div class="table_box isTable">
        <el-table
          :data="zfTbaleData"
          height="600"
          fit
          highlight-current-row
          stripe
          style="width: 100%"
          border
          @cell-click="cellClick"
        >
          <el-table-column type="index" align="center" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="date" label="时间" align="center">
            <template #default="scope">
              <div>
                {{ scope.row.date }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="zcfr" label="内容" align="center">
            <template #default="scope">
              {{ scope.row.text }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else >
      <div class="from_box">
        <div class="sr_box">
          <div class="titles" style="transform: translateY(1px)">下发监区:</div>
          <el-select
          v-model="selectValue"
          placeholder="监区"
          style="width: 200px; "
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
  
        </div>
        <div class="sr_box">
          <div class="titles">通知内容:</div>
          <el-input
            v-model="textarea"
            style="width: 440px"
            :rows="4"
            type="textarea"
            placeholder="输入内容"
          />
        </div>
        <div class="btns">
            <el-button type="primary">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/api";
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits } from "vue";
const textarea = ref('')
const selectValue = ref("");

const options = ref([
  {
    id: "Option1",
    name: "Option1",
  },
]);

const activeName = ref("列表");
const props = defineProps({
  sonData: {
    type: String,
    default: "",
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
let input = ref("");
onBeforeMount(() => {
  if (props.jqArr) {
    options.value = props.jqArr;
    selectValue.value = options.value[0].id;
  }
  getFormattedDateTime();
});
const criminalInfo = ref({});
const emit = defineEmits(["childEvent"]);

let zfTbaleData = ref([
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
  {
    date: "2024-11-05 11:20:30",
    text: "监区环境整洁，将于进行卫生大检查。检查内容包括个人床铺整理",
  },
]);
const sendToParent = () => {
  emit("childEvent", "子组件数据");
};
let dateSfm = ref("");
let hour = ref("");
let daydata = ref("");

const searchClick = () => {
  getCyLevelByType(activeName.value);
};

const cellClick = (row) => {};

// 获取年月日 时
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;

  return `${year}-${month}-${day} ${hour.value}`;
};
const getCyLevelByType = async (is) => {
  let res = await http.zfpt.CyLevelSelect({
    page: 1,
    limit: 999,
    orgId: selectValue.value,
    type: is,
    name: input.value,
  });

  if (res && res.code == 0) {
    zfTbaleData.value = res.data.data;
    getCriminalInfo(zfTbaleData.value[0]?.provinceCode || "");
  }
};
const handleClick = (tab) => {
  // getCyLevelByType(tab.props.label);
};
</script>

<style scoped lang="scss">
::v-deep .isTable .el-table {
  .cell {
    // height: 30px;
    text-align: center;
    // border: 1px solid #ccc;

    font-size: 12px;
    // line-height: 38px;
  }
}
.from_box {
  width: 100%;
  height: 200px;
  position: relative;
  .sr_box {
    display: flex;

    margin-bottom: 20px;
  }
  .titles {
    font-size: 12px;
    margin-right: 6px;
    transform: translateY(20px);
  }
  .btns{
    position: absolute;
    right: 0px;
    bottom: 20px;
  }
}
.input_box {
  width: 100%;
  height: 40px;
}
.info {
  flex: 16;
  display: flex;
  font-size: 14px;
  flex-wrap: wrap;
  .info-item {
    height: 40px;
    display: flex;
  }
  .base-info,
  .criminal-info {
    padding: 10px 20px;
    flex: 1;
  }
  .lable {
    width: 80px;
    line-height: 25px;
  }
  .content {
    line-height: 25px;
  }
}

.details_box {
  width: 100%;
  height: 300px;
}
.table_box {
  width: 100%;
  height: 410px;
}
.drawer_box {
  width: 100%;
  height: 100%;
}
</style>
